main.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:b/home_screen.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomeScreen(),
debugShowCheckedModeBanner: false,
);
}
}
]]>
home_screen.dart
<![CDATA[
import 'package:b/product_get_model.dart';
import 'package:b/product_detail.dart';
import 'package:b/product_get_services.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<Product> productModel = [];
bool isLoaded = false;
getmyProducr() {
isLoaded = true;
getProducts().then((value) {
setState(() {
productModel = value;
isLoaded = false;
});
});
}
@override
void initState() {
getmyProducr();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("E-Comerce App From Get API"),
),
body: isLoaded
? const Center(child: CircularProgressIndicator())
: ListView.builder(
shrinkWrap: true,
itemCount: productModel.length,
itemBuilder: (context, index) {
final apiProduct = productModel[index];
return Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetail(
product: apiProduct,
),
),
);
},
child: Material(
elevation: 1,
borderRadius: BorderRadius.circular(20),
child: Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Hero(
tag: apiProduct.images[0],
child: CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(
apiProduct.thumbnail,
),
),
),
),
const SizedBox(width: 5),
SizedBox(
width: MediaQuery.of(context).size.width / 1.4,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
apiProduct.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
Row(
children: [
Text(
"\$${apiProduct.price.toString()}",
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 5),
const Icon(
Icons.star,
color: Colors.orange,
size: 20,
),
Text(apiProduct.rating.toString())
],
)
],
),
)
],
),
),
),
);
},
),
);
}
}
]]>
product_detail.dart
<![CDATA[
import 'package:b/product_get_model.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class ProductDetail extends StatelessWidget {
final Product product;
const ProductDetail({super.key, required this.product});
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.zero,
shrinkWrap: true,
children: [
Hero(
tag: product.images[0],
child: Image.network(
product.images[0],
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
children: [
Row(
children: [
Expanded(
child: Text(
product.title.toString(),
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
),
Expanded(
child: Text(
"\$${product.discountPercentage.toString()}% Discount",
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.bold, color: Colors.red),
),
),
],
),
Row(
children: [
const Icon(
Icons.star,
color: Colors.orange,
size: 20,
),
const SizedBox(width: 5),
Text(product.rating.toString()),
const SizedBox(width: 20),
Text(
"in stock: \$${product.stock.toString()}",
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.green,
fontSize: 15),
),
],
),
const SizedBox(height: 15),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Price",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black45,
),
),
Text(
"Category",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black45,
),
),
Text(
"Brand",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black45,
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"\$${product.price.toString()}",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
Text(
product.category,
maxLines: 1,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
Text(
product.brand,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
)
],
),
const SizedBox(height: 20),
Text(
"${product.description}...",
style: const TextStyle(fontSize: 19),
),
const SizedBox(height: 20),
Row(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[200],
),
onPressed: () {
Navigator.pop(context);
},
child: const Padding(
padding: EdgeInsets.all(18.0),
child: Icon(
Icons.arrow_back_ios,
color: Colors.black,
),
),
),
const SizedBox(width: 10),
Expanded(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[200],
),
onPressed: () {
Navigator.pop(context);
},
child: const Padding(
padding: EdgeInsets.all(18.0),
child: Text(
"Book Now",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black,
),
)),
),
),
],
)
],
),
),
],
)
],
),
);
}
}
]]>
product_get_model.dart
<![CDATA[
// To parse this JSON data, do
//
// final productModel = productModelFromJson(jsonString);
import 'dart:convert';
ProductModel productModelFromJson(String str) =>
ProductModel.fromJson(json.decode(str));
String productModelToJson(ProductModel data) => json.encode(data.toJson());
class ProductModel {
List<Product> products;
num total;
num skip;
num limit;
ProductModel({
required this.products,
required this.total,
required this.skip,
required this.limit,
});
factory ProductModel.fromJson(Map<String, dynamic> json) => ProductModel(
products: List<Product>.from(
json["products"].map((x) => Product.fromJson(x))),
total: json["total"],
skip: json["skip"],
limit: json["limit"],
);
Map<String, dynamic> toJson() => {
"products": List<dynamic>.from(products.map((x) => x.toJson())),
"total": total,
"skip": skip,
"limit": limit,
};
}
class Product {
num id;
String title;
String description;
num price;
num discountPercentage;
num rating;
num stock;
String brand;
String category;
String thumbnail;
List<String> images;
Product({
required this.id,
required this.title,
required this.description,
required this.price,
required this.discountPercentage,
required this.rating,
required this.stock,
required this.brand,
required this.category,
required this.thumbnail,
required this.images,
});
factory Product.fromJson(Map<String, dynamic> json) => Product(
id: json["id"],
title: json["title"],
description: json["description"],
price: json["price"],
discountPercentage: json["discountPercentage"]?.toDouble(),
rating: json["rating"]?.toDouble(),
stock: json["stock"],
brand: json["brand"],
category: json["category"],
thumbnail: json["thumbnail"],
images: List<String>.from(json["images"].map((x) => x)),
);
Map<String, dynamic> toJson() => {
"id": id,
"title": title,
"description": description,
"price": price,
"discountPercentage": discountPercentage,
"rating": rating,
"stock": stock,
"brand": brand,
"category": category,
"thumbnail": thumbnail,
"images": List<dynamic>.from(images.map((x) => x)),
};
}
]]>
product_get_services.dart
<![CDATA[
import "package:b/product_get_model.dart";
import "package:http/http.dart" as http;
getProducts() async {
Uri url = Uri.parse("https://dummyjson.com/products");
var res = await http.get(url);
try {
if (res.statusCode == 200) {
var data = productModelFromJson(res.body);
return data.products;
} else {
print("If any error occured");
}
} catch (e) {
print(e.toString());
}
}
]]>
MANVIA BLOG